<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>vue html demo</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="getElement" ref="demo1">获取元素</button>
            <h3 ref="demo">哈哈哈开心</h3>
            <hr>
            <login ref="mylogin"></login>
        </div>
        <script>

            var login = {
                template: '<h1>123</h1>',
                data() {
                    return {
                        msg: 'da'
                    }
                },
                methods: {
                    show() {
                        console.log('调用了子组件')
                    }
                },
            }

            new Vue({
                el: '#app',
                data: {

                },
                methods:{
                    getElement() {
                        // ref是英文单吃 reference 引用的意思 值类型和引用类型 引用就是ref referenceError
                        console.log(this.$refs.demo.innerText)
                        console.log(this.$refs.demo1.innerText)
                        console.log(this.$refs.mylogin.msg)
                        this.$refs.mylogin.show()

                    }
                },
                components: {
                    login
                }
            })
        </script>
    </body>
</html>